<template>
  <div>
    <header class="titleWrapper">
      <h4><strong>购物车</strong></h4>
      <button class="clearCart" @click="ClearAll" >清空购物车</button>
    </header>
    <div class="tabBar">
      <div class="tabBarLeft">
        <a
          href="javascript:;"
          class="cartCheckBox"
        ></a>
        <span style="font-size: 16px;" @click="SelectAll">全选或取消</span>
      </div>
      <div class="tabBarRight">
        <button class="mui-btn mui-btn-red" @click="BuySelected">
          去结算
          <!-- ({{this.$CartChecked[0].number}}) -->
        </button>
      </div>
    </div>
  </div>
</template>
  
<script>
import mui from "../../../mui/js/mui.js"
export default {
  name: 'CartFoot',
  methods:{
    ClearAll(){
      const keys = Object.keys(localStorage);
      if (keys.some(key => localStorage.getItem(key) == "购物车")) {
        // 存在值为 "购物车" 的键值对
        mui.confirm('确认要删除全部吗？', '提示', ['确定', '取消'], function(e) {
          if (e.index == 0) {
            localStorage.clear();
            location.reload();  
          }
        }, 'div');
      } else {
        // 不存在值为 "购物车" 的键值对
        mui.toast('购物车已空!', { type: 'success' })
      }

    },
    BuySelected(){
      const checkedValues = [];
      // 获取所有勾选框元素
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      // 遍历勾选框元素数组，获取已勾选的值
      checkboxes.forEach(checkbox => {
        if (checkbox.checked) { // 检查勾选状态
          var node = checkbox.previousSibling;
          while (node && node.nodeType !== Node.ELEMENT_NODE) {
            node = node.previousSibling;
          }
          checkedValues.push(node.innerText); // 将被勾选的id添加到列表里
        }
      });
      console.log(checkedValues)
      const keys = Object.keys(localStorage);
      if (keys.some(key => localStorage.getItem(key) == "购物车")) {
        // 存在值为 "购物车" 的键值对
        mui.confirm('确认要购买选中商品？', '提示', ['确定', '取消'], function(e) {
          if (e.index == 0) {
            for (var i = 0; i < checkedValues.length; i++) {
              var key = checkedValues[i]; // 获取需要删除的 key 值
              localStorage.removeItem(key); // 删除本地存储中该 key 对应的数据
            }
            location.reload();  
          }
        }, 'div');
      } else {
        // 不存在值为 "购物车" 的键值对
        mui.toast('购物车已空!', { type: 'success' })
      }

    },
    SelectAll(){
      // 获取所有的复选框元素
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      //判断是否为全选
      var all=0
      for (let i = 0; i < checkboxes.length; i++) {
          if(checkboxes[i].checked == false){
            all=1;
          };
      }
      if(all){
        // 循环遍历所有的复选框元素，并设置它们的checked属性为true
        for (let i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = true;
        }
      }else{
        for (let i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = false;
        }
      }
    },

  }
}
</script>

<style scoped>
.titleWrapper{
  position: fixed;
  width:100%;
  height: 32px;
  text-align: center;
  background-color: #dd524d;
  color:#fff;
  top:0;
}
.clearCart{
  position: fixed;
  right: 0;
  top: 0px;
  border: none;
  color: red;
}
  .tabBar {
  position: fixed;
  left: 0;
  bottom: 2.99rem;
  width: 100%;
  height:100%;
  height: 2.5rem;
  background-color: #fff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.01rem solid #e0e0e0;
}

.tabBarLeft {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.tabBarLeft .selectAll {
  margin-left: 1rem;
  font-size: 1rem;
}

.totalPrice {
  color: #E9232C;
}

.tabBarRight .pay {
  width: 5rem;
  height: 2rem;
  background-color: #E9232C;
  border-radius: 1rem;
  margin-right: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #fff;
  position:absolute;
  right:2em
}
</style>
  